.main {
  height: 100px;

  .news-section {
    display: flex;
    height: 342px;
    background: url('../../assets/news_bg.png') no-repeat;

    // 轮播图区域
    .banner {
      width: 605px;

      .image-list {
        display: flex;
        width: 604px;
        overflow: hidden;

        .item {
          /* 默认情况下是被压缩的,所以 width: 100%; 会不生效,设置 flex-shrink: 0; 禁止压缩 */
          flex-shrink: 0;
          width: 100%;

          a {
            display: block;

            img {
              width: 100%;
            }
          }
        }
      }

      .title-list {
        display: flex;
        height: 44px;
        line-height: 44px;

        .item {
          flex: 1;
          text-align: center;

          a {
            display: block;
            color: #b1b2be;

            &:hover {
              color: #f3c258;
            }
          }

          &.active a{
            color: #f3c258;
          }
        }
      }
    }

    // 新闻区域
    .news {
      /* 当 flex: 1;时,如果子层设置了 white-space: nowrap; 时(如需要设置文字过长时的省略号),文字过多时会将内容撑的非常高(宽),此时设置 overflow: hidden; 即可 */
      flex: 1;
      overflow: hidden;
      padding: 0 17px;

      .title-list {
        display: flex;
        height: 48px;
        border-bottom: 1px solid #000;

        .item {
          width: 52px;

          a {
            display: block;
            height: 48px;
            line-height: 45px;
            box-sizing: border-box;
            color: #b8b9c5;
            text-align: center;
            transition: border-bottom 0.2s linear;
          }

          &.active a, &:not(.more) a:hover{
            color: #f3c258;
            border-bottom: 3px solid #f3c258;
          }

        }
      }

      // 新闻标题
      .notice {
        height: 36px;
        line-height: 36px;
        margin-top: 18px;
        padding: 0 15px;
        background-color: #414046;

        a {
          display: block;
          font-size: 18px;
          color: #f3c258;
        }
      }

      .news-list {
        margin-top: 12px;

        .item {
          display: flex;
          align-items: center;
          margin-bottom: 11px;

          .desc {
            flex: 1;
            color: #b8b9c5;
          }

          .date {
            padding: 0 8px;
            color: #999;
            font-size: 12px;
          }
        }
      }
    }

    // 下载区域
    .download {
      width: 236px;

      a {
        display: block;
        background: url('../../assets/main_sprite.png') no-repeat;

        &.download-btn {
          height: 128px;
          background-position: 0 -219px;
        }

        &.guard-btn {
          height: 106px;
          background-position: 0 -350px;
        }

        &.experience-btn {
          height: 108px;
          background-position: 0 -461px;
        }
      }
    }
  }
}